﻿@page "/TreeList/Columns/ColumnChooser"

<DemoPageSectionComponent Id="TreeList-Columns-ColumnChooser" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        @inject ISpaceObjectDataProvider SpaceObjectDataProvider

        <div class="treelist-container">
            <DxTreeList @ref="TreeList"
                        Data="Data"
                        ChildrenFieldName="Satellites"
                        ShowAllRows="true"
                        ColumnResizeMode="TreeListColumnResizeMode.NextColumn"
                        TextWrapEnabled="false"
                        SizeMode="Params.SizeMode"
                        CssClass="max-h-480">
                <Columns>
                    <DxTreeListDataColumn FieldName="Name"/>
                    <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type"/>
                    <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass" DisplayFormat="N2">
                        <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
                    </DxTreeListDataColumn>
                    <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius" DisplayFormat="N2">
                        <HeaderCaptionTemplate>Radius, km</HeaderCaptionTemplate>
                    </DxTreeListDataColumn>
                    <DxTreeListDataColumn FieldName="Volume10pow9KM3" Caption="Volume" DisplayFormat="N2">
                        <HeaderCaptionTemplate>Volume, 10<sup>9</sup> &#215; km<sup>3</sup></HeaderCaptionTemplate>
                    </DxTreeListDataColumn>
                    <DxTreeListDataColumn FieldName="SurfaceGravity" Caption="Gravity" DisplayFormat="N2">
                        <HeaderCaptionTemplate>Gravity, m/s<sup>2</sup></HeaderCaptionTemplate>
                    </DxTreeListDataColumn>
                    <DxTreeListDataColumn FieldName="Density" Visible="false" DisplayFormat="N2">
                        <HeaderCaptionTemplate>Density, g/cm<sup>3</sup></HeaderCaptionTemplate>
                    </DxTreeListDataColumn>
                </Columns>
                <ToolbarTemplate>
                    <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
                        <DxToolbarItem Text="Column Chooser" Click="ColumnChooserButton_Click" IconCssClass="treelist-toolbar-column-chooser" />
                    </DxToolbar>
                </ToolbarTemplate>
            </DxTreeList>
        </div>

        @code {
            ITreeList TreeList { get; set; }
            object Data { get; set; }

            protected override void OnInitialized () {
                Data = SpaceObjectDataProvider.GenerateData();
            }

            protected override void OnAfterRender (bool firstRender) {
                if(firstRender) {
                    TreeList.BeginUpdate();
                    TreeList.ExpandRow(0);
                    TreeList.ExpandRow(3);
                    TreeList.EndUpdate();
                }
            }

            void ColumnChooserButton_Click () {
                TreeList.ShowColumnChooser();
            }
        }
    </ChildContentWithParameters>
</DemoPageSectionComponent>
